import React,{useState} from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar,Checkbox,CenterPopup  } from 'antd-mobile'
import style from './index.module.scss'

const Index: React.FC = () => {
    const navigate = useNavigate()
    const [visible, setVisible] = useState(true)
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>好大夫在线</NavBar>
            <CenterPopup
        visible={visible}
        onMaskClick={() => {
          setVisible(false)
        }}
      >
        <div className={style.popup}>
            <h5>温馨提示</h5>
            <ul>
                <li>不能指定医生和医院</li>
                <li>系统会根据病情匹配合适的医生</li>
            </ul>
                <button onClick={()=> setVisible(false)}>我知道了</button>
        </div>
      </CenterPopup>
            <div className={style.top}>
                您希望什么样的医生回答您的问题?
            </div>
            <div className={style.box}>
                <div>二甲医院主治及以上医生</div>
                <div className={style.p}><Checkbox></Checkbox>极速图文 10元/2小时</div>
                <ul>
                    <li>99%的患者，医生在3分钟内接诊;</li>
                    <li>接诊后可最长交流2小时;</li>
                    <li>需上传完整清晰病历资料</li>
                </ul>
                <div><Checkbox></Checkbox>极速电话(可传图片)19.9元/10分钟</div>
                <ul>
                    <li>3分钟内通话，最长通话10分钟</li>
                    <li> 由专业医助对症推荐二甲医院医生</li>
                </ul>
            </div>
             <div className={style.box}>
                <div>三甲医院主治及以上医生</div>
                <div className={style.p}><Checkbox></Checkbox>极速图文 19元/2小时</div>
                <ul>
                    <li>99%的患者，医生在3分钟内接诊，</li>
                    <li>接诊后可最长交流2小时;</li>
                    <li>需上传完整清晰病历资料</li>
                </ul>
                <div className={style.p}><Checkbox></Checkbox>极速电话(可传图片)29.9元/10分钟</div>
                <ul>
                    <li>3分钟内通话，最长通话10分钟</li>
                    <li> 由专业医助对症推荐三甲医院医生</li>
                </ul>
            </div>
            <div className={style.bottom}>
                <button>立即申请</button>
            </div>
        </div>
    )
}

export default Index
